Main content ah kal rawh Docs navigation ah kal rawh
in English

Inhmelhriattirna

Khawvela responsive, mobile-first site siamna atana framework lar ber Bootstrap hmangin tan la la, jsDelivr leh template starter page hmangin tan la rawh.

He page ah hian

A bul tan nghal vat

I project-ah Bootstrap hi rang taka add duh em? jsDelivr hmang la, open source CDN a thlawna hman theih a ni. Package manager hmangin nge source files download a ngai em? Downloads page ah hian kal rawh .

CSS a ni

Kan CSS load turin stylesheet chu stylesheet dang zawng zawng hmain <link>i chhungah copy-paste rawh .<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS chuan a ti a

Kan component tam tak hi a hnathawh theih nan JavaScript hman a ngai a ni. A bik takin, anmahni JavaScript plugins leh Popper an mamawh a ni. A hnuaia <script>s</body> zinga pakhat chu i page tawp lamah, closing tag hma lawkah dah la , a enable theih nan.

Telkhawm

Bootstrap JavaScript plugin leh dependency zawng zawng kan bundle pahnih zinga pakhat nen hian telh vek rawh. Both bootstrap.bundle.jsleh kan tooltips leh popovers te tan Popperbootstrap.bundle.min.js te pawh a tel . Bootstrap-a thil awmte hriat belh duh chuan kan contents section hi en la.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Inthenhrang

Scripts solution hranpa hmanga kal i tum chuan Popper hi a rawn lang hmasa tur a ni (tooltips emaw popovers emaw i hman chuan), chutah chuan kan JavaScript plugins te hi a rawn lang leh tur a ni.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Module hrang hrangte

, i hman chuan Bootstrap chu module atan<script type="module"> kan hman dan hi en la .

Component hrang hrangte

Eng component nge chiang taka kan JavaScript leh Popper mamawh? A hnuaia show components link ah hian click la. General page structure chungchangah i chiang lo tak tak a nih chuan, entirnan page template atan chhiar chhunzawm zel ang che.

JavaScript mamawh component te chu entir rawh
  • Hnawhchhuah a nih theihna tur alerts
  • State toggling tur button leh checkbox/radio hnathawh dan tur
  • Slide behavior zawng zawng, control leh indicator zawng zawng tan carousel
  • Content hmuh theihna toggling atan collapse rawh
  • Display leh positioning atan dropdowns ( Popper pawh a ngai bawk )
  • Modals te chu a lantir dan tur, a awmna tur hmun tur a ni a, scroll behavior te pawh a awm bawk
  • Navbar hmangin kan Collapse plugin chu responsive behavior implement turin kan tizau a ni
  • Offcanvases te chu a lan dan tur, a awmna tur hmun tur leh scroll behavior tur a ni
  • Toasts pholan leh paih chhuah nan
  • Tooltips leh popovers te entir leh dahna tur ( Popper pawh a ngai bawk )
  • Scroll awm dan leh navigation update te chu scrollspy hmangin

Starter template a ni

I page te chu design leh development standard thar ber ber nen set up tir ngei ang che. Chu chu HTML5 doctype hman a, responsive behavior dik tak neih theihna turin viewport meta tag dah tel tihna a ni. A zawng zawng kha han dah khawm la, i page te chu hetiang hian a awm tur a ni:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Step dang tur atan Layout docs emaw kan official examples emaw ah lut la, i site-a content leh components te lay out tan rawh.

Global pawimawh tak tak te

Bootstrap hian global style leh setting pawimawh tak tak a hmang a, chu chu i hman hunah i hriat chian a ngai dawn a, chung zawng zawng chu cross browser style normalization lam hawia siam vek a ni deuh ber. Dive lut ila.

HTML5 doctype a ni

Bootstrap hian HTML5 doctype hman a ngai a. A tel lo chuan funky incomplete styling thenkhat i hmu ang a, mahse a telh chuan hiccups lian tham a thlen tur a ni lo.

<!doctype html>
<html lang="en">
  ...
</html>

Meta tag chhang thei tak a ni

Bootstrap is developed mobile first , chu strategy a ni a, chu chu mobile devices tana code kan optimize hmasa a, chutah chuan CSS media query hmangin a tul angin components kan scale up thin. Device zawng zawng tana rendering leh touch zooming dik tak neih theih nan , i <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Hei hi a taka entir nan starter template ah hian i hmu thei ang .

Box-sizing a ni

CSS-a sizing awlsam zawk neih duh chuan global box-sizingvalue content-boxchu border-box. Hei hian paddingelement pakhat final computed width a nghawng lo tih a tichiang a, mahse third-party software thenkhat Google Maps leh Google Custom Search Engine te nen harsatna a thlen thei a ni.

Override i mamawh hun tlemteah chuan a hnuaia mi ang hian hmang ang che:

.selector-for-some-widget {
  box-sizing: content-box;
}

A chunga snippet hmang hian nested elements—generated content via ::beforeleh te pawh tel— chumi atana ::aftertarlan chu an inherit vek angbox-sizing.selector-for-some-widget

Box model leh sizing chungchang hi CSS Tricks ah hian zir belh rawh .

Reboot leh rawh

Cross-browser rendering tihchangtlun nan Reboot kan hmang a, browser leh device hrang hranga inmil lohna siam\hat nan kan hmang a, chutih rualin HTML element tlangpuiah ngaihdan nei reset tlem zawk kan pe bawk.

Khawtlang

Bootstrap siam chhuah dan tur hriat reng la, heng thil \angkai tak tak hmang hian khawtlang hnenah thlen rawh.

  • The Official Bootstrap Blog chhiar la, subscribe rawh .
  • IRC-a Bootstrapper thawhpui te nen inbiakna nei rawh. irc.libera.chatServer ah chuan, channel #bootstrapah.
  • Implementation tanpuina chu Stack Overflow (tagged ) ah hian hmuh theih a bootstrap-5ni.
  • Developer te chuan npm emaw a ang chi delivery mechanism bootstraphmanga an sem chhuah hunah Bootstrap hnathawh dan siam danglam emaw tihpun emaw package-ah keyword hi an hmang tur a ni a, chu chu maximum discoverability atan an hmang tur a ni.

Twitter-ah @getbootstrap hi i follow thei bawk a , thuthang thar leh music video mak tak tak i hmu thei bawk.